<script lang="ts" setup>
import {useRoute} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import {requestAlbumSongList} from "../../../utils/axiosURL";
import SongTable from "../../../components/common/songtable/index.vue"
import useSongURLStore from "../../../store/songURL";
const songURLStore = useSongURLStore()


const route = useRoute()
const AlbumParamsID = ref<number | any>(route.params.id)
const AlbumQueryID = ref<number | any>(route.query.id)
// 存储歌手专辑的歌单
let savaAlbumSongData = reactive<any>([])
// 用户无数据
let userNoData = ref<boolean>(false)

onMounted(() => {
  requestAlbumSongListFn()
})

// 请求专辑歌单
const requestAlbumSongListFn = () => {
  requestAlbumSongList(AlbumParamsID.value === ':id' ? AlbumQueryID.value : AlbumParamsID.value).then((data: any) => {
    if (!data.songs.length) return userNoData.value = true
    savaAlbumSongData.values = data.songs
    localStorage.setItem("playList", JSON.stringify(data.songs))
    songURLStore.initPlayList(data.songs)
  }).catch(_ => { })
}

</script>

<template>
  <div class="wrapList">
    <div v-if="userNoData" class="noAuthrity">接口无数据</div>
    <SongTable v-else-if="savaAlbumSongData.values.length" :songList=savaAlbumSongData.values />
    <el-skeleton v-else :rows="10" animated />
  </div>
</template>

<style lang="scss" scoped>
.wrapList {
  margin-bottom: 30px;

  .noAuthrity {
    width: 100%;
    text-align: center;
    margin-top: 30px;
    font-family: $activeTextFont;
    font-size: $font-size-lg2;
  }
}
</style>
